<template>
  <div class="col-md-12">
    <select v-model="item.areaA"
            data-placeholder="请选择省"
            id="bean-areaA" name="areaA" class="input-sm"
            required="" aria-required="true" aria-describedby="bean-areaA-error"
            aria-invalid="true">
      <!--<option value="">&#45;&#45;请选择省&#45;&#45;</option>-->
      <!--<option :value="area.id" :selected="item.areaA === area.id" v-for="area in areaAArray">{{area.name}}</option>-->
      <option value="51" selected="selected">四川省</option>
    </select>
    <input type="hidden" name="areaA" v-model="item.areaA">
    <!--<label id="bean-areaA-error" class="help-block m-b-none" for="bean-areaA"></label>-->
    <select v-model="item.areaB"
            data-placeholder="请选择市"
            id="bean-areaB" name="areaB" class="input-sm"
            required="" aria-required="true" aria-describedby="bean-areaB-error"
            aria-invalid="true">
      <!--<option value="">&#45;&#45;请选择市&#45;&#45;</option>-->
      <!--<option :value="area.id" :selected="item.areaB === area.id" v-for="area in areaBArray">{{area.name}}</option>-->
      <option value="5110" selected="selected">内江市</option>
    </select>
    <input type="hidden" name="areaB" v-model="item.areaB">
    <!--<label id="bean-areaB-error" class="help-block m-b-none" for="bean-areaB"></label>-->
    <select v-model="item.areaC"
            data-placeholder="请选择区县"
            id="bean-areaC" name="areaC" class="input-sm"
            required="" aria-required="true" aria-describedby="bean-areaC-error"
            aria-invalid="true">
      <!--<option value="">&#45;&#45;请选择区县&#45;&#45;</option>-->
      <!--<option :value="area.id" :selected="item.areaC === area.id" v-for="area in areaCArray">{{area.name}}</option>-->
      <option value="511025" selected="selected">资中县</option>
    </select>
    <input type="hidden" name="areaC" v-model="item.areaC">
    <!--<label id="bean-areaC-error" class="help-block m-b-none" for="bean-areaC"></label>-->
    <select x-model="item.areaD" @change="areaDSelect"
            data-placeholder="请选择镇"
            id="bean-areaD" name="areaC" class="input-sm"
            required="" aria-required="true" aria-describedby="bean-areaD-error"
            aria-invalid="false">
      <option value="">--请选择镇--</option>
      <option :value="area.id" :selected="item.areaD === area.id" v-for="area in areaDArray">{{area.name}}</option>
    </select>
    <input type="hidden" name="areaE" v-model="item.areaD">
    <!--<label id="bean-areaD-error" class="help-block m-b-none" for="bean-areaD"></label>-->
    <select x-model="item.areaE" @change="areaESelect"
            data-placeholder="请选择村"
            id="bean-areaE" name="areaE" class="input-sm"
            required="" aria-required="true" aria-describedby="bean-areaE-error"
            aria-invalid="false">
      <option value="">--请选择村--</option>
      <option :value="area.id" :selected="item.areaE === area.id" v-for="area in areaEArray">{{area.name}}</option>
    </select>
    <input type="hidden" name="areaE" v-model="item.areaE">
    <input type="hidden" name="regionId" v-model="regionId">
    <input type="hidden" name="regionName" v-model="regionName">
    <span id="bean-regionId-error" class="help-block m-b-none" for="bean-regionId"></span>
  </div>
</template>

<script>
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

  export default {
    name: 'regionSelect',
    data() {
      return {
        item: {
          areaA: '51',
          areaB: '5110',
          areaC: '511025'
        },
        areaAArray: [],
        areaBArray: [],
        areaCArray: [],
        areaDArray: [],
        areaEArray: [],
        regionId: '51,5110,511025',
        regionName: '四川省,内江市,资中县'
      }
    },
    props: {
      regionIds: {
        type: String,
        default: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      // that.areaSelectByTypeValue(1, '1');
      that.areaSelectByTypeValue(4, '511025');
      setTimeout(function() {
        that.item.areaDName = $('#bean-areaD').find('option:selected').text().replace(/[\r\n]/g, '');
        if (that.item.areaDName) {
          that.regionName = that.regionName + ',' + that.item.areaDName
        }
        console.log(that.regionName);

        that.item.areaEName = $('#bean-areaD').find('option:selected').text().replace(/[\r\n]/g, '');
        if (that.item.areaEName) {
          that.regionName = that.regionName + ',' + that.item.areaEName
        }
        console.log(that.regionName);
      }, 500)
    },
    updated() {
      // if (!$('#bean-areaA option:selected').val()) {
      //   $('#bean-areaA').val('')
      // }
      // if (!$('#bean-areaB option:selected').val()) {
      //   $('#bean-areaB').val('')
      // }
      // if (!$('#bean-areaC option:selected').val()) {
      //   $('#bean-areaC').val('')
      // }
      if (!$('#bean-areaD option:selected').val()) {
        $('#bean-areaD').val('')
      }
      if (!$('#bean-areaE option:selected').val()) {
        $('#bean-areaE').val('')
      }
    },
    watch: {
      regionIds: function (newVal, oldVal) {
        let that = window.$vueApp = this;
        let ids = newVal;
        console.log(ids);
        ids = ids.split(',');
        if (ids.length > 0) {
          // if (ids[0] !== '1') {
          //   that.item.areaA = ids[0];
          //   that.reloadSelect(2, ids[0]);
          // }
          // if (ids[1]) {
          //   that.item.areaB = ids[1];
          //   that.reloadSelect(3, ids[1]);
          // }
          // if (ids[2]) {
          //   that.item.areaC = ids[2];
          //   that.reloadSelect(4, ids[2]);
          // }
          if (ids[3]) {
            that.item.areaD = ids[3];
            that.regionId = that.regionId + ',' + that.item.areaD;
            // that.item.areaDName = $('#bean-areaD').find('option:selected').text().replace(/[\r\n]/g, '');
            // if (that.item.areaDName) {
            //   that.regionName = that.regionName + ',' + that.item.areaDName
            // }
            // console.log(that.regionName);
            that.reloadSelect(5, ids[3]);
          }
          if (ids[4]) {
            that.item.areaE = ids[4];
            that.regionId = that.regionId + ',' + that.item.areaE;
            // that.item.areaEName = $('#bean-areaD').find('option:selected').text().replace(/[\r\n]/g, '');
            // if (that.item.areaEName) {
            //   that.regionName = that.regionName + ',' + that.item.areaEName
            // }
            // console.log(that.regionName);
          }
        }
      }
    },
    methods: {
      // areaASelect(ele) {
      //   let that = this;
      //   that.item.areaA = $(ele.target).find('option:selected').val().replace(/[\r\n]/g, '');
      //   that.regionId = that.item.areaA;
      //   that.item.areaAName = $(ele.target).find('option:selected').text().replace(/[\r\n]/g, '');
      //   that.regionName = that.item.areaAName;
      //   that.areaSelectByTypeValue(2, ele.target.value);
      // },
      // areaBSelect(ele) {
      //   let that = this;
      //   that.item.areaB = $(ele.target).find('option:selected').val().replace(/[\r\n]/g, '');
      //   that.regionId = that.regionId + ',' + that.item.areaB;
      //   that.item.areaBName = $(ele.target).find('option:selected').text().replace(/[\r\n]/g, '');
      //   that.regionName = that.regionName + ',' + that.item.areaBName;
      //   that.areaSelectByTypeValue(3, ele.target.value);
      // },
      areaCSelect(ele) {
        let that = this;
        that.item.areaC = $(ele.target).find('option:selected').val().replace(/[\r\n]/g, '');
        that.regionId = that.regionId + ',' + that.item.areaC;
        that.item.areaCName = $(ele.target).find('option:selected').text().replace(/[\r\n]/g, '');
        that.regionName = that.regionName + ',' + that.item.areaCName;
        that.areaSelectByTypeValue(4, ele.target.value);
      },
      areaDSelect(ele) {
        let that = this;
        that.item.areaD = $(ele.target).find('option:selected').val().replace(/[\r\n]/g, '');
        // that.regionId = that.regionId + ',' + that.item.areaD;
        that.regionId = '51,5110,511025,' + that.item.areaD;
        that.item.areaDName = $(ele.target).find('option:selected').text().replace(/[\r\n]/g, '');
        that.regionName = '四川省,内江市,资中县,' + that.item.areaDName;
        console.log(that.regionId)
        console.log(that.regionName)
        that.areaSelectByTypeValue(5, ele.target.value);
      },
      areaESelect(ele) {
        let that = this;
        that.item.areaE = $(ele.target).find('option:selected').val().replace(/[\r\n]/g, '');
        // that.regionId = that.regionId + ',' + that.item.areaE;
        that.regionId = '51,5110,511025,' + that.item.areaD + ',' + that.item.areaE;
        that.item.areaEName = $(ele.target).find('option:selected').text().replace(/[\r\n]/g, '');
        // that.regionName = that.regionName + ',' + that.item.areaEName;
        that.regionName = '四川省,内江市,资中县,' + that.item.areaDName + ',' + that.item.areaEName;
        console.log(that.regionId)
        console.log(that.regionName)
      },
      areaSelectByTypeValue(type, value) {
        if (!apiUtil.notEmpty(value)) {
          return;
        }
        let that = this;
        axios.post(site.area.list
          , 'type=' + type + '&parentId=' + value
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            let data = result.data;
            // console.log(JSON.stringify(data));
            switch (type) {
              case 1: {
                that.areaAArray = data;
                that.areaBArray = [];
                that.areaCArray = [];
                that.areaDArray = [];
                that.areaEArray = [];
                break;
              }
              case 2: {
                that.areaBArray = data;
                that.areaCArray = [];
                that.areaDArray = [];
                that.areaEArray = [];
                break;
              }
              case 3: {
                that.areaCArray = data;
                that.areaDArray = [];
                that.areaEArray = [];
                break;
              }
              case 4: {
                that.areaDArray = data;
                that.areaEArray = [];
                break;
              }
              case 5: {
                that.areaEArray = data;
                break;
              }
            }
          } else {
            alert(result.message);
          }
        });
      },
      reloadSelect(type, value) {
        if (!apiUtil.notEmpty(value)) {
          return;
        }
        let that = this;
        axios.post(site.area.list
          , 'type=' + type + '&parentId=' + value
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            let data = result.data;
            // console.log(JSON.stringify(data));
            switch (type) {
              case 1: {
                that.areaAArray = data;
                break;
              }
              case 2: {
                that.areaBArray = data;
                break;
              }
              case 3: {
                that.areaCArray = data;
                break;
              }
              case 4: {
                that.areaDArray = data;
                break;
              }
              case 5: {
                that.areaEArray = data;
                break;
              }
            }
          } else {
            alert(result.message);
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
